import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text, Input, Picker, Textarea, Form, Button } from "@tarojs/components-rn";
import { AtImagePicker } from 'taro-ui';
import { toJS } from 'mobx';
import { inject, observer } from "@tarojs/mobx-rn";
import company_authStyleSheet from "./company_auth_styles";
import { getRuntime, natureOfTheFirmArr, enterpriseScaleArr } from "../../utils/common";
import right from "../../assets/img/right.png";
import PickerArea from "../../components/PickerArea";
var _styleSheet = company_authStyleSheet;
let Personnel = class Personnel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
      companyName: '',
      natureOfTheFirmArr: natureOfTheFirmArr,
      natureOfTheFirm: '',
      enterpriseScaleArr: enterpriseScaleArr,
      enterpriseScale: '',
      certificateIMGArr: [],
      certificateIMG: '',
      enterpriseIntroduce: '',
      area: '',
      areaShow: '',
      areaDetail: '',
      contactsName: '',
      phoneNumnber: '',
      wechatNumber: '',
      qqNumber: '',
      isAuth: false
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '企业认证' });
    this.getUserEnterpriseCertificationInfo();
  }
  getUserEnterpriseCertificationInfo() {
    let { userStore } = this.props.stores;
    userStore.getUserEnterpriseCertificationInfo({
      callback: res => {
        if (res) {
          this.setState({
            info: toJS(res),
            natureOfTheFirm: toJS(res.natureOfTheFirm),
            enterpriseScale: res.enterpriseScale,
            area: res.area && res.area.split('@')[0] || '',
            areaDetail: res.area && res.area.split('@')[1] || ''
          }, () => {
            if (Object.keys(res).length !== 0) {
              // 判断对象是否为空
              this.setState({ isAuth: true });
            }
          });
        }
      }
    });
  }
  changePicker(field, e) {
    this.setState({
      [field]: this.state[field + 'Arr'][e.detail.value]
    });
  }
  onChangeImg(type, e) {
    if (e.length <= 0) {
      return false;
    }
    console.log(e);
    getRuntime().uploadFile(e, res => {
      this.setState({
        [type]: res.join(','),
        [type + 'Arr']: e
      });
    });
  }
  pickerArea(res) {
    this.setState({
      area: res.province.label + res.city.label + res.distract.label
    });
  }
  changeIsAuth() {
    this.setState({ isAuth: false });
  }
  submit(e) {
    let { natureOfTheFirm, enterpriseScale, certificateIMG, area, info } = this.state;
    let { companyName, contactsName, phoneNumnber, wechatNumber, qqNumber, areaDetail, enterpriseIntroduce } = e.detail.value;
    if (!natureOfTheFirm) {
      getRuntime().showToast('请选择企业性质~');
      return false;
    }
    if (!enterpriseScale) {
      getRuntime().showToast('请选择企业规模~');
      return false;
    }
    if (!certificateIMG) {
      getRuntime().showToast('请上传营业执照~');
      return false;
    }
    if (!area) {
      getRuntime().showToast('请选择公司地址~');
      return false;
    }
    if (!companyName) {
      getRuntime().showToast('请填写公司名称~');
      return false;
    }
    if (!contactsName) {
      getRuntime().showToast('请填写联系人姓名~');
      return false;
    }
    if (!phoneNumnber) {
      getRuntime().showToast('请填写联系人电话~');
      return false;
    }
    let { userStore } = this.props.stores;
    userStore.saveEnterpriseCertification({
      form: {
        companyName, natureOfTheFirm, enterpriseScale, certificateIMG, area: area + '@' + areaDetail,
        contactsName, phoneNumnber, wechatNumber, qqNumber, enterpriseIntroduce,
        id: info.id ? info.id : ''
      },
      callback: () => {
        getRuntime().showToast('数据保存成功，等待管理员审核~');
        // setTimeout(() => { getRuntime().navigateBack() }, 2000)
        this.getUserEnterpriseCertificationInfo();
      }
    });
  }
  render() {
    let { info, isAuth, natureOfTheFirmArr, natureOfTheFirm, enterpriseScaleArr, enterpriseScale, certificateIMGArr, area, areaDetail } = this.state;
    return <View style={_styleSheet["company_auth"]}>
        {isAuth && // 信息详情
      <View style={_styleSheet["from-wrap"]}>
              <View style={_styleSheet["item-group-title"]}>－ 基本信息 －</View>
              <View style={[_styleSheet["item-lawyer"], { marginBottom: '10px' }]}>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>企业名称：</Text>
                    <Text style={_styleSheet["name"]}>{info.companyName}</Text>
                 </View>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>企业性质：</Text>
                    <Text style={_styleSheet["name"]}>{info.natureOfTheFirm}</Text>
                 </View>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>企业规模：</Text>
                    <Text style={_styleSheet["name"]}>{info.enterpriseScale}</Text>
                 </View>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>企业地址：</Text>
                    <Text style={_styleSheet["name"]}>{info.area}</Text>
                 </View>
              </View>
              <View style={_styleSheet["item-group-title"]}>－ 企业简介 －</View>
              <View style={_styleSheet["item-lawyer-desc"]}>
                {info.enterpriseIntroduce}
              </View>
              <View style={[_styleSheet["item-group-title"], { marginTop: '10px' }]}>－ 联系方式 －</View>
              <View style={_styleSheet["item-lawyer"]}>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>联系人：</Text>
                    <Text style={_styleSheet["name"]}>{info.contactsName}</Text>
                 </View>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>联系电话：</Text>
                    <Text style={_styleSheet["name"]}>{info.phoneNumnber}</Text>
                 </View>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>微信号：</Text>
                    <Text style={_styleSheet["name"]}>{info.wechatNumber}</Text>
                 </View>
                 <View style={_styleSheet["line"]}>
                    <Text style={_styleSheet["title"]}>QQ号：</Text>
                    <Text style={_styleSheet["name"]}>{info.qqNumber}</Text>
                 </View>
              </View>
              <View onClick={this.changeIsAuth.bind(this)} style={_styleSheet["page-submit"]}>编辑</View>
           </View>}
        {!isAuth && // 保存、编辑信息
      <Form onSubmit={this.submit.bind(this)}>
           <View style={_styleSheet["from-wrap"]}>
              <View style={_styleSheet["item-group-title"]}>－ 基本信息 －</View>
              <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>企业名称</View>
                    <Input name="companyName" placeholderClass="placeholder_class" placeholder="请填写企业名称" value={info.companyName} style={_styleSheet["from-input"]} />
                 </View>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>企业性质</View>
                    <Picker mode="selector" range={natureOfTheFirmArr} onChange={this.changePicker.bind(this, 'natureOfTheFirm')} style={_styleSheet["input-picker"]}>
                       <View style={_styleSheet["tt"]}>
                         {!natureOfTheFirm && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>点击选择</View>}
                         {natureOfTheFirm && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{natureOfTheFirm}</View>}
                          <Image src={right} style={_styleSheet["drop-down-icon"]} />
                       </View>
                    </Picker>
                 </View>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>企业规模</View>
                    <Picker mode="selector" range={enterpriseScaleArr} onChange={this.changePicker.bind(this, 'enterpriseScale')} style={_styleSheet["input-picker"]}>
                       <View style={_styleSheet["tt"]}>
                         {!enterpriseScale && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>点击选择</View>}
                         {enterpriseScale && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{enterpriseScale}</View>}
                          <Image src={right} style={_styleSheet["drop-down-icon"]} />
                       </View>
                    </Picker>
                 </View>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>企业地址</View>
                    <PickerArea onPicketArea={this.pickerArea.bind(this)} areaData={area} />
                 </View>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>详细地址</View>
                    <Input placeholderClass="placeholder_class" name="areaDetail" value={areaDetail} placeholder="请填写企业详细地址" style={_styleSheet["from-input"]} />
                 </View>
                 <View style={[_styleSheet["input-group"], _styleSheet["input-upload"], _styleSheet["bbnone"]]}>
                    <View style={_styleSheet["input-name"]}>上传营业执照</View>
                    <AtImagePicker length={4} count={2} showAddBtn={certificateIMGArr.length < 1} files={certificateIMGArr} onChange={this.onChangeImg.bind(this, 'certificateIMG')} />
                 </View>
              </View>
              <View style={_styleSheet["item-group-title"]}>－ 企业简介 －</View>
              <View style={_styleSheet["input-group"]}>
                 <View style={_styleSheet["input-group"]}>
                    <Textarea placeholderClass="placeholder-class" placeholder="请填写企业简介" maxlength={-1} name="enterpriseIntroduce" value={info.enterpriseIntroduce} style={_styleSheet["from-textarea"]} />
                 </View>
              </View>
              <View style={_styleSheet["item-group-title"]}>－ 联系方式 －</View>

              <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>联系人</View>
                    <Input type="text" placeholderClass="placeholder_class" name="contactsName" placeholder="请填写联系人" value={info.contactsName} style={_styleSheet["from-input"]} />
                 </View>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>联系电话</View>
                    <Input value={info.phoneNumnber} placeholderClass="placeholder_class" name="phoneNumnber" placeholder="请填联系电话" style={_styleSheet["from-input"]} />
                 </View>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>微信号</View>
                    <Input value={info.wechatNumber} placeholderClass="placeholder_class" name="wechatNumber" placeholder="请填写微信号" style={_styleSheet["from-input"]} />
                 </View>
                 <View style={_styleSheet["input-group"]}>
                    <View style={_styleSheet["input-name"]}>QQ号</View>
                    <Input value={info.qqNumber} placeholderClass="placeholder_class" name="qqNumber" placeholder="请填写QQ号" style={_styleSheet["from-input"]} />
                 </View>
              </View>
           </View>
           <Button formType="submit" style={_styleSheet["page-submit"]}>保存</Button>
        </Form>}

      </View>;
  }
};
Personnel = tslib_1.__decorate([inject("stores"), observer], Personnel);
export default Personnel;